iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
0
Modern Web

每日挖個坑,用坑填起耍廢聊天室!系列 第 3

三號坑,裝起nvm,開挖Nuxt

  • 分享至 

  • xImage
  •  

裝個nvm

我們會用到node.js,雖然也可以直接在node官網下載安裝,但這樣就只有一個版本,在開發上我們有時候會需要切換到不同版本的node,nvm就是可以切換node版本的套件,非常之棒~另外就是安裝了nvm就會連npm都幫你裝好,484一舉兩得~(輕輕唱

安裝可參考nvm

有看到很多文章有寫到用Homebrew安裝nvm,但目前官方有寫不支援用Homebrew安裝囉~

Terminal輸入以下安裝nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

裝環境真的是有點煩,最近工作換電腦又裝了一次,裝到懷疑人生,家裡電腦也有裝,看了各個安裝教學,目前最喜歡的是這篇安裝NVM來安裝node.js,主要是下完安裝指令之後還要弄設定檔,設定檔的資料夾位置又很難找,超激煩!推這篇就是連怎麼用指令直接弄好設定檔都教好了,妥妥的,我就不寫了XD

那如果是用直接找檔案來修改的方式的話,我有一次是遇到弄完還是不行,結果是重開機就好了...恩,所以說,有時候遇到黑人問號的問題,重開機就對了!


node版本至少安裝8.9.0以上,現在很多套件都只有支援比較新的node版本,而且新專案就要用新的才潮啊!!(誒

另外這篇Node.js 環境設定-for mac,如果有需要移除nvm可以看看,我是沒有試過,留個紀錄XD


建立Nuxt

在資料夾目錄下執行(npx在NPM版本5.2.0默認安裝)

npx create-nuxt-app 專案名稱

npm6.1以後可以下

npm init nuxt-app 專案名稱

用yarn

yarn create nuxt-app 專案名稱

然後他會問你想要裝的其他內容,可參考官網,伺服器框架選用express不過express的特性是啥我也不知(喂)

要記得選喔不然他不會幫你弄出預設的server資料夾

https://ithelp.ithome.com.tw/upload/images/20190919/20111962pQjHD3c8jt.png

terminal像這樣

跑一陣子之後,資料夾就會長滿預設的內容囉~yaya

接著輸入

npm run dev

成功跑起來之後就可以在localhost:3000看到預設畫面

如果建不起來可以使用npm install or npm i 安裝一下套件再重新執行npm run dev

只要每次有安裝或更新套件過後會遇到建不起來的狀況,都可以npm i一下,有可能是套件沒裝好導致

另外也有一個套件管理器叫做yarn,用法跟npm差不多,但覺得yarn要另外裝覺得麻煩,我有時候又不會一直在同一台電腦上面跑專案,不想要常常裝環境,所以我在本系列就直接用npm來玩了(懶


題外話,最近在公司專案上也有遇過npm i失敗是卡在少了某plugin的token上(公司自己的plugin),但我第一次碰到就也搞不清楚,試了幾次失敗才問了同事,他才貼給我產生token的方法,蠢事一件這樣XD但身為一個菜逼八,又人生地不熟,當下就一直覺得自己很智障QQ

今天還有遇到npm i有神奇的錯誤,說某個依賴的套件找不到他某個commit的package.json導致安裝失敗,同事幫我看了老半天,原本以為是我npm的設定有問題,但換個資料夾卻可以,用yarn裝也ok,最後發現原因是那個repo太過久遠,使用的是npm 5,但目前我的電腦用到6,解決方法就是把repo裡的package-lock砍掉,再執行npm i就成功了


上一篇
二個坑,一個坑裡有Nuxt,一個有Socket
下一篇
四號坑,在Nuxt資料夾內翻滾
系列文
每日挖個坑,用坑填起耍廢聊天室!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2019-09-22 21:53:58

不過express的特性是啥我也不知(喂)
靠XD 我本來想既然你寫socket,那一定也會用到express,因為我對express也不是很熟 想來參考一下 ......結果 XDDDDDDDDDDDDDD

看更多先前的回應...收起先前的回應...

(羞紅了臉)/images/emoticon/emoticon25.gif
我只有用它來接過api喝哈哈
其他都別人寫好好的

那你寫好借我抄一下~(欸欸欸XDDD

我好像不會寫到他的感覺(?)
nuxt自己生完了server那邊的設定,我只有要把socket塞進去而已(廢)只好等你寫了(跪求)

老實說我也不會寫(握手~X/images/emoticon/emoticon20.gif

我要留言

立即登入留言